<template>
  <div>
    <p>ref:作用是选择dom节点或者组件</p>
    <p ref="p1">我是一段文字</p>
    <!-- 通过ref，拿到组件实例，获取子组件的数据，调用子组件的函数 -->
    <com-mixin ref="mixin1"></com-mixin>
    <button v-for="num in 5" :key="num" ref="btns">
      {{num}}
    </button>
    <p>ref的用法：
      1.加给普通的dom节点，选择dom节点并操作
      2.加给组件，拿到组件实例，获取子组件的数据，调用子组件的函数 
      3.加给循环的dom或者组件，通过下标获取具体内容
    </p>
  </div>
</template>

<script>
import comMixin from './comMixin.vue'
export default {
  components: {
    comMixin
  },
  created() {
    document.title = this.$route.meta.title || '你好';
  },
  mounted() {
    let el = this.$refs.p1;
    el.innerHTML = '666';
    console.log(99999999, this.$refs.mixin1.msg);
    this.$refs.mixin1.showMsg();
    console.log(this.$refs.btns);
  },
}
</script>

<style>

</style>